<template>
  <div class="time-wrap d-flex justify-content-center align-items-center">
    <div class="left"></div>
    <div class="year value">{{ year }}</div>
    <div class="year-name name-time">年</div>
    <div class="month value">{{ month }}</div>
    <div class="month-name name-time">月</div>
    <div class="day value">{{ day }}</div>
    <div class="day-name name-time">日</div>
    <div class="split"></div>
    <div class="hour time-small value">{{ hour1 }}</div>
    <div class="hour time-small value">{{ hour2 }}</div>
    <div class="split-symbol">：</div>
    <div class="minute time-small value">{{ minute1 }}</div>
    <div class="minute time-small value">{{ minute2 }}</div>
    <div class="split-symbol">：</div>
    <div class="second time-small value">{{ second1 }}</div>
    <div class="second time-small value">{{ second2 }}</div>
    <div class="right"></div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onUnmounted } from 'vue';

let year: any = ref(0);
let month: any = ref(0);
let day: any = ref(0);
let hour1: any = ref(0);
let hour2: any = ref(0);
let minute1: any = ref(0);
let minute2: any = ref(0);
let second1: any = ref(0);
let second2: any = ref(0);
getTime();
var timer = setInterval(getTime, 1000);
onUnmounted(() => {
  clearInterval(timer);
});
function getTime() {
  let date = new Date();
  year.value = date.getFullYear();
  month.value = date.getMonth() + 1;
  day.value = date.getDate();
  let hour: any = date.getHours();
  if (hour < 10) {
    hour = '0' + hour;
  } else {
    hour += '';
  }
  hour1.value = Number(hour[0]);
  hour2.value = Number(hour[1]);
  let minute: any = date.getMinutes();
  if (minute < 10) {
    minute = '0' + minute;
  } else {
    minute += '';
  }
  minute1.value = Number(minute[0]);
  minute2.value = Number(minute[1]);
  let second: any = date.getSeconds();
  if (second < 10) {
    second = '0' + second;
  } else {
    second += '';
  }
  second1.value = Number(second[0]);
  second2.value = Number(second[1]);
}
</script>
<style lang="scss" scoped>
.time-wrap {
  height: 104px;
  padding: 0 34px 0 95px;
  font-family: Digital;
}
.left {
  width: 30px;
  height: 37px;
  margin-right: 25px;
  background: url(./../assets/箭头.png) no-repeat;
  background-size: 100% 100%;
}
.right {
  width: 30px;
  height: 37px;
  background: url('./../assets/箭头 拷贝.png') no-repeat;
  background-size: 100% 100%;
}
.value {
  font-size: 30px;
  font-family: Digital;
  font-weight: 400;
  color: #feb035;
  margin-right: 25px;
}
.name-time {
  font-size: 24px;
  font-family: MicrosoftYaHei;
  color: #ffffff;
  margin-right: 25px;
}
.small-time-value {
}
.time-small {
  width: 42px;
  height: 42px;
  background: url('./../assets/范围 拷贝 4.png');
  margin-right: 8px;
  text-align: center;
}
.split {
  margin-right: 26px;
}
.split-symbol {
  font-size: 24px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
</style>
